<template>
  <el-form-item label="商品分类" :prop="prop" :rules="rules">
    <el-select v-model="modelValue">
      <el-option
          v-for="(item, index) in goodsCateList"
          :key="index"
          :label="item.name"
          :value="item.id">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script lang="ts" setup>
import ApiResult from "@/api/base/ApiResult";
import {request,post} from "@/utils/request";

const props = withDefaults(defineProps<{
  modelValue: number | null | undefined, // model value
  params?: object, // 获取cate选项的参数
  url?: string, // 获取cate选项的链接
  prop?: string, // form表单中对应的字段取值
}>(), {
  modelValue: null,
  url: 'mall/admin/category/getOnlineList',
  params: () => ({}),
  prop: 'mallProductCategory',
})

const emits = defineEmits(['update:model-value'])

const goodsCateList = ref([])
const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:model-value', newValue)
  }
})

onMounted(async () => {
  const rs:ApiResult<any> = await request(props.url, props.params)

  if (rs.code === 200) {
    goodsCateList.value = rs.payload ?? []
  }
})

const rules = [{
  trigger: 'change',
  message: '请选择商品分类'
}]
</script>

<style scoped lang="scss">

</style>
